<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>demo</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/kefu.css">
    <style type="text/css">
        body {
            -webkit-user-select: none;
            user-select: none;
            color: #333;
            background: #fff;
            font-size: 12px;
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            background-color: #efefef;
            background-size: cover;
            margin: 0;
            padding: 0px;
        }

        .top {
            position: relative;
            height: 34px;
            line-height: 34px;
            text-align: center;
            margin-bottom: 10px;
        }

        .top a.shift {
            position: absolute;
            left: 0;
            top: 0;
            height: 40px;
            width: 40px;
        }

        a.shift img {
            width: 80%;
            height: auto;
            margin-top: 10%;
        }

        .paymentWay, .paymentWay img {
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0px;
        }

        .am-flexbox {
            display: -webkit-box;
            display: -webkit-flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -webkit-box-orient: horizontal;
            box-orient: horizontal;
            width: 96%;
            margin-left: 2%;
            height: 25px;
            padding: 10px 0;

        }

        .am-flexbox-item {
            -webkit-box-sizing: border-box;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            min-width: 20px;
            font-size: 1.2rem;
            font-weight: 500;
            padding-left: 40px;
        }

        .border_bottom {
            border-bottom: 2px solid #cececd;
        }

        .fenqi, .fenqi img {
            width: 100%;
            height: auto;
            margin-top: 3%;
        }

        .next_btn {
            width: 25%;
            height: auto;
            margin-left: 37.5%;
            margin-top: 10%;
        }

        .next_btn img {
            width: 100%;
            height: auto;
        }

        input {
            opacity: 0;
            position: absolute;
            z-index: 3;
            left: 10px;
        }

        .radioCircle1 {
            position: absolute;
            z-index: 1;
            left: 10px;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 1px solid #717170;
            margin-left: 3px;
            margin-top: 0px;
        }

        .radioCircle2 {
            position: absolute;
            z-index: 2;
            left: 10px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #000;
            margin-left: 3px;
            margin-top: 0px;
            opacity: 0;
        }

        input:checked + .radioCircle2 {
            opacity: 1;
        }

        input:checked + .radioCircle1 {
            opacity: 1;
        }

        .nav {
            position: fixed;
            z-index: 99;
            background: #000;
            width: 60%;
            height: 100%;
            left: -100%;
            top: 0px;
            opacity: 0.8;
        }

        .mask {
            position: fixed;
            z-index: 9;
            background: #000;
            width: 100%;
            height: 100%;
            top: 0px;
            opacity: 0.2;
            left: 0%;
            display: none;
        }

        .nav p {
            width: 100%;
            border-top: 1px solid #fff;
            color: #fff;
            text-align: center;
            font-size: 1.2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div class="top">
    <a class="shift"><img src="img/nav.png"></a>
    Please Choose
</div>
<div class="mask"></div>
<div class="nav am-flexbox-v">
    <p class="am-flexbox-item">Home Page</p>

    <p class="am-flexbox-item">Campaign</p>

    <p class="am-flexbox-item">Web Navigation</p>

    <p class="am-flexbox-item">My Favourite</p>

    <p class="am-flexbox-item">My Order</p>

    <p class="am-flexbox-item">My Dealer</p>

    <p class="am-flexbox-item">Address Management</p>
</div>
<div class="paymentWay">
    <div class="am-flexbox border_bottom">
        <input type="radio" name="payWay"><span class="radioCircle2"></span><span class="radioCircle1"></span>

        <div class="am-flexbox-item">Test Drive</div>
    </div>
    <div class="am-flexbox border_bottom">
        <input type="radio" name="payWay" checked=""><span class="radioCircle2"></span><span
            class="radioCircle1"></span>

        <div class="am-flexbox-item">Buy Directly</div>
    </div>
    <div class="am-flexbox">
        <input type="radio" name="payWay"><span class="radioCircle2"></span><span class="radioCircle1"></span>

        <div class="am-flexbox-item">Get a Loan</div>
    </div>
</div>
<div class="fenqi">
    <img src="img/fenqi.png">
</div>
<!-- Swiper JS -->
<div class="next_btn" id="payBtn">
    <img src="img/next.png">
</div>
<div class="ke" id="kefu">
    <img src="img/kefu1.png" id="duihua">
</div>
<div class="contain_share">
    <div class="share_dialog">
        <a href="javascript:void(0)" class="close"></a>
        <img src="img/dialog.png">
    </div>
</div>
<script type="text/javascript" src="lib/zepto.min.js"></script>
<script type="text/javascript">
    Zepto(function ($) {
        $(".shift").click(function () {
            $(".nav,.mask").animate({left: "0"}, 500);
            $(".mask").css("display", "block")
        })
        $(".mask").click(function () {
            $(".nav").animate({left: "-100%"}, 500);
            $(".mask").css("display", "none")
        })
        $("#payBtn").click(function () {
            window.open("order.html", "_self");
        })
    })
</script>
<script type="text/javascript" src="js/kefu.js"></script>
</body>
</html>